<template>

    <div>

        <div style="height: 30px; line-height: 30px;padding-left: 20px;">
              <h1>客群列表查询</h1>
        </div> 
        
        <ui-form  v-model="searchForm" label-width="100px"  class="query-form">
                    <ui-form-item label="群组名称" >
                        <ui-input></ui-input>
                    </ui-form-item>
                    <ui-form-item label="所属机构"  >
                        <ui-select v-model="searchForm.institutionalUnit" placeholder="请选择所属机构">
                            <!-- <ui-option v-for="" :key="" :label="" :value=""></ui-option>       -->
                            <ui-option :value="0" label="零售"></ui-option>
                            <ui-option :value="1" label="公司"></ui-option>
                        </ui-select>
                    </ui-form-item>

                    <ui-form-item label="客户登记"  >
                        <ui-select v-model="searchForm.institutionalUnit" placeholder="请选择所属机构">
                            <!-- <ui-option v-for="" :key="" :label="" :value=""></ui-option>       -->
                            <ui-option :value="0" label="零售"></ui-option>
                            <ui-option :value="1" label="公司"></ui-option>
                        </ui-select>
                    </ui-form-item>
                   
                    
                    <div style="text-align: center;">
                        <ui-button class="primary-btn" @click="searchList(true)" icon="ui-icon-search">查询</ui-button>
                        <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh- right">重置</ui-button>
                    </div>           
            </ui-form>
     
        <div>

            <div>
                <span style="float: left;">客群列表</span>
                <ui-button @click="add">详情</ui-button>
                <ui-button style="float: right;" @click="smsadd">动态建群</ui-button>
                <ui-button style="float: right;" @click="smsadd">静态建群</ui-button>
            </div>
            <div>
                <ui-table :data="tableData">
                    <ui-table-column type="selection" width="55">
                    </ui-table-column>
                    <ui-table-column label="序号" prop="" ></ui-table-column>
                    <ui-table-column label="群组名称" >
                        <template slot-scope="scope">
                                <span @click="">{{ }}</span>
                        </template>
                    </ui-table-column>
                    <ui-table-column label="客户类型" prop="" ></ui-table-column>
                    <ui-table-column label="客群类型" prop="" ></ui-table-column>
                    <ui-table-column label="客群来源" prop="" ></ui-table-column>
                    <ui-table-column label="客群标签" prop="" ></ui-table-column>
                    <ui-table-column label="群组人数"  >
                        <template slot-scope="scope">
                            <span>

                            </span>
                            <img />
                        </template>
                    </ui-table-column>
                    <ui-table-column label="创建人" prop="" ></ui-table-column>
                    <ui-table-column label="归属机构" prop="" ></ui-table-column>
                    <ui-table-column label="到期时间" prop="" ></ui-table-column>

                </ui-table>

                <ui-pagination
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                :layout="layout"
                :page-sizes="pageSizeList"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </ui-pagination>


            </div>

 

        </div>   

    </div>
</template>
<script>
export default{
    data(){
        return{
            searchForm:{

            },
            layout:"total, sizes, prev, pager, next, jumper", // 分页顺序
        }
    },
    methods:{
        add(){
            this.$router.push({
                path:'customerGroupdetails'
            })
        }
    }
}
</script>